/*  -------- 公共样式 ---------- */
/* 先清除标签默认样式 */
* {
    margin: 0;
    padding: 0;
}

.版心居中 {
    width: 1200px;
    margin: auto;
}

/* 整个页面 背景颜色 */
body {
    background-color: #f3f5f7;
}

/* 去除标签 默认的项目符号 */
li {
    list-style: none;
}

/* 去除 超链接标签 的下划线 */
a {
    text-decoration: none;
}

/*.clearfix:before, .clearfix:after {*/
/*    content: "";*/
/*    display: table;*/
/*}*/

/*.clearfix:after {*/
/*    clear: both;*/
/*}*/

/*.clearfix {*/
/*    *zoom: 1;*/
/*}*/

/* --------- 区域 样式 ----------- */
.版面 {
    margin-top: 30px; /* 上外边距 */
}

.版面-标题 {
    height: 45px; /* 标题设置 高度 */
    display: flex; /* flex布局 */
    justify-content: space-between; /* flex布局 主轴对齐方式 */
}

.版面-标题 h3 {
    /*float: left; !* 浮动布局 左对齐 *!*/
    font-size: 20px; /* 文字大小 */
    color: #494949; /* 文字颜色 */
}

.版面-标题 a {
    /*float: right;*/
    font-size: 12px; /* 文字大小 颜色 */
    color: #a5a5a5;
    
    margin-top: 10px; /* 上外边距 */
    margin-right: 30px; /* 右外边距 */
}

/* 把li 的父级ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.版面-展示 ul {
    width: 1225px; /* 盒子宽度 */

    display: flex; /* flex布局 */
    flex-wrap: wrap; /*flex布局 盒子可以换行 */
    justify-content: space-between; /*flex布局， 主轴对齐方式*/
}

/* li标签具体设置 */
.版面-展示 ul li {
    /*float: left;*/

    width: 228px; /* 宽高 背景色 */
    height: 270px;
    background-color: #fff;

    /*margin-right: 15px;*/
    margin-bottom: 15px; /* 下外边距, 效果盒子上下有间隔 */

    /* 设置 鼠标悬停时,图片有位移效果  */
    position: relative; /* 相对定位 */
    top: 0; /* 偏移量 */
    transition: all 0.5s; /* 过渡效果, 渐变 */
}
/* 鼠标悬停 状态 */
.版面-展示 ul li:hover {
    top: -8px; /* 向上移动 */
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%); /* 盒子 阴影效果 */
}

.版面-展示 ul li a {
    /*display: block;*/
}


.版面-展示 ul li img {
    /*width: 100%;*/
}

.版面-展示 ul li h4 {
    margin: 20px 20px 20px 25px; /* 外边距 4值写法 */
    font-size: 14px; /* 文字大小 颜色  */
    color: #050505;
    font-weight: 400; /* 文字去除 默认的粗体 */
}

.版面-展示 .信息 {
    margin: 0 20px 0 25px; /* 外边距 4值写法 上, 右, 下, 左 */
    font-size: 12px; /* 文字大小 颜色 */
    color: #999;
}

.版面-展示 .信息 span {
    color: #ff7c2d; /* 文字颜色 */
}
